import { InfiniteScroll, NavBar } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useLocation } from 'react-router-dom'
import utils from '../../utils/utils'
import { useNavigate } from 'react-router-dom'
const List = () => {
    const navigate=useNavigate()
    const [list,setList]=useState([])
    const [page,setPage]=useState(1)


    const {state}=useLocation()
    const {start,end}=state
    console.log(start,end);

    const getData=async()=>{
     const resp=await utils.post('/trip/train',{start,end,page})
     console.log(resp.data);
     setList([...list,...resp.data.data])
     setPage(page + 1)
    }
    
    useEffect(()=>{
     getData()
    },[])

    const back=()=>{
        navigate('/')
    }
    const getDeail=(v)=>{
        navigate('/deail',{state:v})
    }
  return (
    <div>
       列表
       <NavBar onBack={back}>{state.start}——{state.end}</NavBar>
       <div className='list-item'>
        {
            list.map((v,i)=>{
                return <dl key={i} 
                onClick={() => getDeail(v)}
                style={{
                    display:"flex",
                    padding: 10,
                    border: "1px solid #ccc",
                    justifyContent: 'space-around'
                }}>
                 <dt>{v.start}-{v.end}</dt>
                 <dd>
                  <div>是否高铁{v.isSpeed}</div>
                  <div>是否有票{v.isSeat}</div>
                 </dd>
                 <dd>
                  <div>商务座:{v.tick?.vip}</div>
                  <div>一等座:{v.tick?.firstTick}</div>
                  <div>二等座:{v.tick?.secondTick}</div>
                 </dd>
                </dl>
            })
        }
       </div>
       <InfiniteScroll loadMore={getData} hasMore={true} />
    </div>
  )
}

export default List
